<template>
	<view>
		<mescroll-body :sticky="true" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:down="downOption">
			<!-- 头部 -->
			<view class="head-box">
				<image class="head-img" :src="fuserInfo.avatar" mode="aspectFill"></image>
				<view class="head-news" style="">
					<view class="align-center" style="width: 500rpx;">
						<!-- {{fuserInfo.nickname}} -->
						<view class="head-name" style="max-width: 330rpx;">{{fuserInfo.nickname}}</view>
						<!-- 如果是会员/plus会员，显示等级 12-->
						<view class="ml10" v-if="fuserInfo.level<3">
							<image :src="'../../static/images/icon/vip'+fuserInfo.level+lang+'.png'" mode="heightFix"
								class="block" style="height: 40rpx;"></image>
						</view>
						<!-- 是运营商会员/运营商plus会员，显示星级 34 -->
						<view class="ml10" v-if="fuserInfo.level>2">
							<image :src="'../../static/images/icon/'+(fuserInfo.star-1)+lang+'x.png'" mode="heightFix"
								class="block" style="height: 40rpx;"></image>
						</view>
					</view>
					<view class="align-center" style="margin-top: 24rpx;" @click="bzShow()">
						<view class="head-bz" style="max-width: 440rpx;">{{$t('fan').备注}}:{{fuserInfo.remark || ''}}
						</view>
						<image class="head-bj" src="../../static/images/fans/icon_bianji.png" mode="widthFix"></image>
					</view>
					<view class="head-bz" style="margin-top: 24rpx;">{{$t('common').电话}}:{{fuserInfo.phone}}</view>

					<view class="align-center flex-wrap lable-box">
						<view v-if="fuserInfo.active_status==1" class="lable-list lable-four">{{$t('fan').未购物}}</view>
						<view v-if="fuserInfo.active_status==2" class="lable-list lable-four">{{$t('fan').不活跃}}</view>
						<view v-if="fuserInfo.active_status==3" class="lable-list  lable-three">{{$t('fan').低活跃}}</view>
						<view v-if="fuserInfo.active_status==4" class="lable-list lable-two">{{$t('fan').中活跃}}</view>
						<view v-if="fuserInfo.active_status==5" class="lable-list lable-one">{{$t('fan').高活跃}}</view>

						<view v-if="fuserInfo.power_status==2" class="lable-list lable-three">{{$t('fan').不利发展}}</view>
						<view v-if="fuserInfo.power_status==3" class="lable-list lable-three">{{$t('fan').发展困难}}</view>
						<view v-if="fuserInfo.power_status==4" class="lable-list lable-two">{{$t('fan').利好发展}}</view>
						<view v-if="fuserInfo.power_status==5" class="lable-list lable-one">{{$t('fan').稳健发展}}</view>
						<view v-if="fuserInfo.power_status==6" class="lable-list lable-one">{{$t('fan').发展优异}}</view>

						<view v-if="fuserInfo.consum_status==2" class="lable-list lable-four">{{$t('fan').无消费力}}</view>
						<view v-if="fuserInfo.consum_status==3" class="lable-list lable-three">{{$t('fan').低消费力}}</view>
						<view v-if="fuserInfo.consum_status==4" class="lable-list lable-three">{{$t('fan').偏低消费力}}
						</view>
						<view v-if="fuserInfo.consum_status==5" class="lable-list lable-two">{{$t('fan').中消费力}}</view>
						<view v-if="fuserInfo.consum_status==6" class="lable-list lable-one">{{$t('fan').高消费力}}</view>
						<view v-if="fuserInfo.consum_status==7" class="lable-list lable-one">{{$t('fan').超高消费力}}</view>
					</view>
				</view>
				<image class="head-phone" src="../../static/images/fans/icon_dianhua.png" mode="" @click="bdpop=true">
				</image>
			</view>

			<!-- 数据 -->
			<view class="head-bot">
				<view class="bot-con">
					<view class="bot-c-bot">
						<view class="align-center bot-cb-list" v-for="(m,n) in timeArr" :key="n">
							<image class="bot-cb-icon" :src="m.img" mode="widthFix"></image>
							<view class="bot-cb-text gray6">{{$t('fandetail')[m.text]}}</view>
							<view class="bot-cb-time gray6">{{m.time}}</view>
						</view>
					</view>
					<view class="bot-c-top align-center">
						<view class="bot-ct-list">
							<view class="bot-ct-num gray3">{{parseFloat(fuserInfo.self_f_value || 0).toLocaleString()}}
							</view>
							<view class="bot-ct-text gray6">{{$t('fandetail').本月自购销售额}}</view>
						</view>
						<view class="bot-ct-list">
							<view class="bot-ct-num gray3">{{parseFloat(fuserInfo.new_f_valued || 0).toLocaleString()}}
							</view>
							<view class="bot-ct-text gray6">{{$t('fandetail').粉丝本月销售额已结算}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- tab -->
			<view class="sticky-tabs">
				<view class="tab-box align-center justify-around">
					<view class="tab-list" v-for="(m,n) in tabArr" :key="n" @click="tabBtn(m.id)">
						<view class="tab-text gray9" :class="tabId==m.id?'tab-ac bold':''">{{$t('fandetail')[m.text]}}
						</view>
						<view class="tab-bor" v-if="tabId==m.id"></view>
					</view>
				</view>

				<!-- 个人购买订单状态 -->
				<view v-if="tabId==2" style="background-color: #F5F5F5;">
					<view class="justify-end">
						<view class="align-center ddzt-box posRelative" @click="openperStatus()">
							<view v-if="perstatusActive>0 && !pershowStatus" class="ddzt-text gray9 "
								:style="perstatusActive>0?'color:#F44A42;':''">{{$t('fandetail').订单状态}}</view>
							<view v-else class="ddzt-text gray9 " :style=" pershowStatus?'color:black;':''">
								{{$t('fandetail').订单状态}}
							</view>
							<image v-if="perstatusActive>0 && !pershowStatus" class="ddzt-img"
								src="../../static/images/fans/sxy.png" mode="aspectFill"></image>
							<image v-else class="ddzt-img"
								:src="!pershowStatus?'../../static/images/fans/xiala@2x.png':'../../static/images/fans/heixia.png'"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="bgWhite plr15 posAbsort zIndex999" v-if="pershowStatus">
						<view class="gray6 ptb10"><text>{{$t('fandetail').订单状态}}</text></view>
						<view class="flex-wrap">
							<view v-for="(item,index) in perstatus" :key="index" @click="selperStatus(index)"
								class="plr12 mr10 radius5 ptb3 ft12 mb10"
								:class="index==perstatusActive?'fstj-h-t-ac':'fstj-h-t-noac'">
								<text>{{$t('common')[item.title]}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 贡献订单状态 -->
				<view v-if="tabId==3" style="background-color: #F5F5F5;">
					<view class="justify-end">
						<view class="align-center ddzt-box posRelative" @click="openconStatus()">
							<view v-if="constatusActive>0 && !conshowStatus" class="ddzt-text gray9 "
								:style="constatusActive>0?'color:#F44A42;':''">{{$t('fandetail').订单状态}}</view>
							<view v-else class="ddzt-text gray9 " :style="conshowStatus?'color:black;':''">
								{{$t('fandetail').订单状态}}
							</view>
							<image v-if="constatusActive>0 && !conshowStatus" class="ddzt-img"
								src="../../static/images/fans/sxy.png" mode="aspectFill"></image>
							<image v-else class="ddzt-img"
								:src="!conshowStatus?'../../static/images/fans/xiala@2x.png':'../../static/images/fans/heixia.png'"
								mode="aspectFill"></image>
						</view>
					</view>
					<view class="bgWhite plr15 posAbsort zIndex999" v-if="conshowStatus">
						<view class="gray6 ptb10"><text>{{$t('fandetail').订单状态}}</text></view>
						<view class="flex-wrap">
							<view v-for="(item,index) in constatus" :key="index" @click="selconStatus(index)"
								class="plr12  radius5 ptb3 ft12 mb10"
								:class="[index==constatusActive?'fstj-h-t-ac':'fstj-h-t-noac',index==constatus.length-1?'':'mr10']">
								<text>{{$t('common')[item.title]}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>



			<!-- 列表 -->
			<view class="list-box">
				<!-- 粉丝数据 -->
				<view class="fs-list" v-if="tabId==1">
					<!-- <fans-data :uid="uid"></fans-data> -->
					<!-- 销售额统计 -->
					<view class="ztsj-box mt10">
						<view class="ztsj-head gray3 align-center" style="border-bottom: 2rpx solid #EEEEEE;">
							<view><text>{{$t('fan').销售额统计}}</text></view>
							<!-- 				<image @click="tcShow(5)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
									src="../../static/images/fans/icon_wenhao.png" mode=""></image> -->
						</view>

						<view class="fstj-list">
							<view class="align-center">
								<view class="fstj-h-tab" v-for="(m,n) in xseTab" :key="n"
									:class="n==xseId?'fstj-h-t-ac':''" @click="xseBtn(n)">{{$t('common')[m.text]}}
								</view>
							</view>
						</view>

						<view class="cjtj-box" style="padding-top: 0;">
							<view class="align-center">
								<view v-if="xseId==0">
									<view class="cjtj-rs gray3">
										{{$t('fan').销售额}}：{{totalInfo.moon_settl_sell || 0}}
									</view>
									<view class="cjtj-rs gray3">
										{{$t('fan').贡献收益}}：{{(totalInfo.devote || 0) | changeCurrency}}
									</view>
								</view>
								<view v-if="xseId==1">
									<view class="cjtj-rs gray3">
										{{$t('fan').销售额}}：{{totalInfo.up_moon_settl_sell || 0 }}
									</view>
									<view class="cjtj-rs gray3">
										{{$t('fan').贡献收益}}：{{(totalInfo.up_devote || 0)| changeCurrency}}
									</view>
								</view>
								<view v-if="xseId==2">
									<view class="cjtj-rs gray3">
										{{$t('fan').销售额}}：{{totalInfo.total_sell || 0 }}
									</view>
									<view class="cjtj-rs gray3">
										{{$t('fan').贡献收益}}：{{(totalInfo.total_devote || 0)| changeCurrency}}
									</view>
								</view>
							</view>
							<view class="charts-box" style="width: 650rpx;height: 500rpx;">
								<l-echart ref="chartRef" @finished="init"></l-echart>
							</view>
						</view>
					</view>

					<!-- 本月新增销售额趋势 -->
					<view class="ztsj-box">
						<view class="ztsj-head gray3">{{$t('fan').本月新增销售额趋势}}</view>
						<view class="charts-box">
							<qiun-data-charts type="line" :opts="byxzOpts" :chartData="byxzChart" :ontouch="true" />
						</view>
					</view>

					<!-- 已结算销售额统计 -->
					<view class="ztsj-box">
						<view class="ztsj-head gray3">{{$t('fan').已结算销售额统计}}</view>
						<view class="yjs-box">
							<view class="align-center flex-wrap">
								<view class="yjs-list" v-for="(m,n) in yjsArr" :key="n">
									<view class="gray6 yjs-text">{{$t('fan')[m.text]}}</view>
									<view class="gray3 yjs-num">{{m.num}}</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 本月已结算销售额趋势 -->
					<view class="ztsj-box">
						<view class="ztsj-head gray3">{{$t('fan').本月已结算销售额趋势}}</view>
						<view class="charts-box">
							<qiun-data-charts type="line" :opts="byjsOpts" :chartData="byjsChart" :ontouch="true" />
						</view>
					</view>

					<!-- 销售统计 -->
					<view class="ztsj-box">
						<view class="ztsj-head gray3" style="border-bottom: 2rpx solid #EEEEEE;">
							<text>{{$t('fan').销售统计}}</text>
							<image @click="tcShow(5)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
								src="../../static/images/fans/icon_wenhao.png" mode=""></image>
						</view>
						<view class="fstj-list" style="border-bottom: 2rpx solid #EEEEEE;">
							<view class="fsth-head align-center justify-between">
								<view class="align-center">
									<view class="fstj-h-tab" v-for="(m,n) in xstjTab" :key="n"
										:class="n==xstjId?'fstj-h-t-ac':''" @click="xstjBtn(n)">{{$t('common')[m.text]}}
									</view>
								</view>
							</view>

							<view class="align-center justify-around">
								<view class="fstj-l-item" v-for="(m,n) in xstjArr" :key="n">
									<view class="fstj-l-text gray6">{{$t('common')[m.text]}}</view>
									<view class="fstj-l-num gray3">{{m.num}}</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 粉丝统计 -->
					<view class="ztsj-box">
						<view class="ztsj-head gray3" style="border-bottom: 2rpx solid #EEEEEE;">
							<text>{{$t('fan').按等级统计粉丝人数}}</text>
							<image @click="tcShow(6)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
								src="../../static/images/fans/icon_wenhao.png" mode=""></image>
						</view>
						<view class="fstj-list" style="border-bottom: 2rpx solid #EEEEEE;">
							<view class="align-center">
								<view class="fstj-h-tab" v-for="(m,n) in djTab" :key="n"
									:class="n==djId?'fstj-h-t-ac':''" @click="djBtn(n)">{{$t('common')[m.text]}}</view>
							</view>
							<view class="align-center flex-wrap ">
								<view class="fstj-l-item " style="width: 50%;" v-for="(m,n) in djArr" :key="n">
									<view class="fstj-l-text gray6">{{$t('fan')[m.text]}}</view>
									<view class="fstj-l-num gray3">{{m.num}}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="ztsj-box">
						<view class="ztsj-head gray3 align-center" style="border-bottom: 2rpx solid #EEEEEE;">
							<text>{{$t('fan').按活跃度统计粉丝人数}}</text>
							<image @click="tcShow(3)" style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
								src="../../static/images/fans/icon_wenhao.png" mode=""></image>
						</view>
						<view class="fstj-list" style="padding: 0rpx 0 20rpx;">
							<view class="align-center flex-wrap">
								<view class="fstj-l-item" v-for="(m,n) in hydArr" :key="n">
									<view class="fstj-l-text gray6">{{$t('fan')[m.text]}}</view>
									<view class="fstj-l-num gray3">{{m.num}}</view>
								</view>
							</view>
						</view>
					</view>

					<!-- 成交粉丝统计 -->
					<view class="ztsj-box">
						<view class="align-center">
							<view class="ztsj-head gray3">{{$t('fan').成交粉丝统计}}</view>
							<image style="width: 28rpx;height: 28rpx;margin-left: 16rpx;"
								src="../../static/images/fans/icon_wenhao.png" mode="" @click="tcShow(4)"></image>
						</view>

						<view class="align-center">
							<view class="fstj-h-tab" v-for="(m,n) in cjtjTab" :key="n"
								:class="n==cjtjId?'fstj-h-t-ac':''" @click="cjtjBtn(n)">{{$t('common')[m.text]}}</view>
						</view>

						<view class="cjtj-box">
							<view class="align-center">
								<view>
									<view class="cjtj-rs gray3 ft14" v-if="cjtjId==0">{{$t('fan').成交人数}}
										({{$t('index').人}}):{{totalInfo.day_fans_deal_num}}
									</view>
									<view class="cjtj-rs gray3" v-if="cjtjId==0">{{$t('fan').首购粉丝客单价}}
										({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):{{totalInfo.day_fans_first_price}}
									</view>
									<view class="cjtj-rs gray3" v-if="cjtjId==0">{{$t('fan').复购粉丝客单价}}
										({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):{{totalInfo.day_fans_repeat_price}}
									</view>
								</view>
								<view>
									<view class="cjtj-rs gray3" v-if="cjtjId==1">{{$t('fan').成交人数}}
										({{$t('index').人}}):{{totalInfo.moon_fans_deal_num}}
									</view>
									<view class="cjtj-rs gray3" v-if="cjtjId==1">{{$t('fan').首购粉丝客单价}}
										({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):{{totalInfo.moon_fans_first_price}}
									</view>
									<view class="cjtj-rs gray3" v-if="cjtjId==1">{{$t('fan').复购粉丝客单价}}
										({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):{{totalInfo.moon_fans_repeat_price}}
									</view>
								</view>
								<view>
									<view class="cjtj-rs gray3" v-if="cjtjId==2">{{$t('fan').成交人数}}
										({{$t('index').人}}):{{totalInfo.total_fans_deal_num}}
									</view>
									<view class="cjtj-rs gray3" v-if="cjtjId==2">{{$t('fan').首购粉丝客单价}}
										({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):{{totalInfo.total_fans_first_price}}
									</view>
									<view class="cjtj-rs gray3" v-if="cjtjId==2">{{$t('fan').复购粉丝客单价}}
										({{$store.state.currency=='CNY'?$t('index').元:$t('index').美元}}):{{totalInfo.total_fans_repeat_price}}
									</view>
								</view>


							</view>
							<view class="" style="width: 650rpx;height: 500rpx;">
								<!-- <qiun-data-charts tooltipFormat="yAxisDemo1" type="ring" :opts="cjfsOpts" :chartData="cjfsChart" /> -->
								<l-echart ref="chartReff" @finished="initf"></l-echart>
							</view>
						</view>

					</view>
					<!-- 整体发展力 弹窗 -->
					<u-popup :show="tcpop" mode="center" round="10" :safeAreaInsetBottom="false">
						<view class="tc-box">
							<view class="align-center tc-head">
								<image class="tc-h-icon" src="../../static/images/fans/shu-bor.png" mode="widthFix">
								</image>
								<view class="tc-h-tit gray3">
									<text v-if="tcType==1">{{$t('fan').整体发展力}}</text>
									<text v-if="tcType==2">{{$t('fan').整体消费力}}</text>
									<text v-if="tcType==3">{{$t('fan').粉丝活跃度}}</text>
									<text v-if="tcType==4">{{$t('fan').成交粉丝}}</text>
									<text v-if="tcType==5">{{$t('fan').销售统计}}</text>
									<text v-if="tcType==6">{{$t('fan').粉丝等级人数统计}}</text>
								</view>
							</view>
							<view class="tc-h-text gray9">
								<text v-if="tcType==1">{{$t('fan').粉丝人数需达标50人及以上}}</text>
								<text v-if="tcType==2">{{$t('fan').粉丝人数需达标50人及以上}}</text>
								<text v-if="tcType==3">{{$t('fan').数据统计截止至前一天}}</text>
							</view>
							<view>
								<!-- 整体发展力 -->
								<view class="tc-con" v-if="tcType==1">
									<view class="tc-c-head align-center">
										<view class="tc-c-a tc-c-text gray3">
											<view>{{$t('fan').团队直接}}</view>
											<view>{{$t('fan').邀请成员数}}</view>
										</view>
										<view class="tc-c-b tc-c-text gray3">
											<view>{{$t('fan').最大部门业绩}}</view>
											<view>{{$t('fan').占自己业绩比}}</view>
										</view>
										<view class="tc-c-c tc-c-text gray3">{{$t('fan').团队发展力}}</view>
									</view>

									<view class="tc-c-list">
										<view class="align-center tc-c-item">
											<view class="tc-c-a tc-c-text gray3">1{{$t('fan').位}}</view>
											<view class="tc-c-b tc-c-text gray3">
												<view>{{$t('fan').大于}}80%</view>
												<view>{{$t('fan').大于等于}}60%{{$t('fan').小于}}80%</view>
												<view>{{$t('fan').大于等于}}30%{{$t('fan').小于}}60%</view>
												<view>{{$t('fan').大于}}0%小于30%</view>
												<view>{{$t('fan').等于}}0%</view>
											</view>
											<view class="tc-c-c tc-c-text gray3">
												<view>{{$t('fan').不利发展}}</view>
												<view>{{$t('fan').发展困难}}</view>
												<view>{{$t('fan').发展困难}}</view>
												<view>{{$t('fan').发展困难}}</view>
												<view>{{$t('fan').发展困难}}</view>
											</view>
										</view>
									</view>
									<view class="tc-c-list" style="background-color: #F8F8F8;">
										<view class="align-center tc-c-item">
											<view class="tc-c-a tc-c-text gray3">2{{$t('fan').位及以上}}</view>
											<view class="tc-c-b tc-c-text gray3">
												<view>{{$t('fan').大于}}80%</view>
												<view>{{$t('fan').大于等于}}60%{{$t('fan').小于}}80%</view>
												<view>{{$t('fan').大于等于}}30%{{$t('fan').小于}}60%</view>
												<view>{{$t('fan').大于}}0%小于30%</view>
												<view>{{$t('fan').等于}}0%</view>
											</view>
											<view class="tc-c-c tc-c-text gray3">
												<view>{{$t('fan').发展困难}}</view>
												<view>{{$t('fan').利好发展}}</view>
												<view>{{$t('fan').稳健发展}}</view>
												<view>{{$t('fan').发展优异}}</view>
												<view>{{$t('fan').发展困难}}</view>
											</view>
										</view>
									</view>
								</view>

								<!-- 整体消费力 -->
								<view class="tc-con" v-if="tcType==2">
									<view class="tc-c-head align-center">
										<view class="tc-c-a tc-c-text gray3"
											style="width: 439rpx;border-right: 2rpx solid #EEEEEE;">
											<view>{{$t('fan').近三个月消费人数}}</view>
											<view>{{$t('fan').占团队总人数比}}</view>
										</view>
										<view class="tc-c-c tc-c-text gray3">{{$t('fan').占团队总人数比}}</view>
									</view>
									<view class="tc-c-list">
										<view class="align-center tc-c-item" v-for="(m,n) in ztxfl" :key="n">
											<view class="tc-c-a tc-c-text gray3"
												style="width: 439rpx;border-right: 2rpx solid #EEEEEE;">
												{{$t('fan')[m.title]}}
											</view>
											<view class="tc-c-c tc-c-text gray3">{{$t('fan')[m.cont]}}</view>
										</view>
									</view>
								</view>

								<!-- 粉丝活跃度 -->
								<view class="tc-con" v-if="tcType==3">
									<view class="tc-c-list">
										<view class="align-center tc-c-item" v-for="(m,n) in fshyArr" :key="n">
											<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
												{{$t('fan')[m.title]}}
											</view>
										</view>
									</view>
								</view>

								<!-- 成交粉丝 -->
								<view class="tc-con" v-if="tcType==4">
									<view class="tc-c-list">
										<view class="align-center tc-c-item">
											<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
												{{$t('fan').首购粉丝_仅下单一次的粉丝}}
											</view>
										</view>
										<view class="align-center ">
											<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
												{{$t('fan').复购粉丝_在所选时间内下单2单及以上的粉丝}}
											</view>
										</view>
									</view>
								</view>
								<!-- 销售额统计 -->
								<view class="tc-con" v-if="tcType==5">
									<view class="tc-c-list">
										<view class="align-center tc-c-item">
											<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
												{{$t('fan').PLUS套组在今日本月上月粉丝成功下单PLUS套组的数量不包含取消退款订单}}
											</view>
										</view>
										<view class="align-center ">
											<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
												{{$t('fan').运营商套组在今日本月上月粉丝成功下单必买套组的数量不包含取消退款订单}}
											</view>
										</view>
									</view>
								</view>
								<!-- 等级统计 -->
								<view class="tc-con" v-if="tcType==6">
									<view class="tc-c-list">
										<view class="align-center tc-c-item" v-for="(item,index) in djtjArr "
											:key="index">
											<view class="tc-c-a tc-c-text gray3" style="width: 600rpx;">
												{{$t('fan')[item.title]}}
											</view>
										</view>
									</view>
								</view>
							</view>

							<view class="tc-bot" @click="tcHide()">{{$t('fan').我知道了}}</view>
							<image class="tc-h-gb" @click="tcHide()" src="../../static/images/fans/icon_cuowu.png"
								mode=""></image>
						</view>
					</u-popup>
				</view>


				<!-- 个人购买记录 -->
				<view class="gr-list" v-if="tabId==2">
					<view v-if="perpurre.length>0">
						<view class="gr-item" v-for="(m,n) in perpurre" :key="n">
							<view class="align-center justify-between gr-head">
								<view class="gr-time gray3">{{$t('fandetail').下单时间}}：{{m.create_time}}</view>
								<view class="gr-time ">
									<!-- <text v-if="m.status==0" style="color: #F44A42;">待支付</text> -->
									<text v-if="m.order_status==1" style="color: #F44A42;">{{$t('common').待发货}}</text>
									<text v-if="m.order_status==2" style="color: #F44A42;">{{$t('common').待收货}}</text>
									<text v-if="m.order_status==3">{{$t('common').已完成}}</text>
									<text v-if="m.order_status==4">{{$t('common').已关闭}}</text>
									<text v-if="m.order_status==-1" class="gray9">{{$t('common').已取消}}</text>
									<!-- <text v-if="m.status==0" class="gray9">超时未支付</text> -->
								</view>
							</view>

							<view class="gr-bot" v-for="(item,index) in m.good" :key="index">
								<image class="gr-img" :src="item.image" mode="aspectFill"></image>
								<view class="gr-con">
									<view style="display: flex;justify-content: space-between;">
										<view class="gr-name gray3 clamp2">{{item.store_name}}</view>
										<view class="gr-num gray3">x{{item.product_num}}</view>
									</view>
									<view class="gr-price gray3">
										{{m.country==1?'':"$"}}{{item.product_price}}
									</view>
								</view>
							</view>
							<view class="bold ft14 justify-end pb10">
								{{$t('fan').合计}}:{{m.country==1?'':"$"}}{{m.total_price}}
							</view>
						</view>
					</view>
					<!-- 					<view class=" tc" v-else style="margin: 20rpx 0  40rpx; ">
						<image src="../../static/images/empty/none.png" mode="" style="width: 520upx;height: 380upx;">
						</image>
						<view class="ft15">{{$t('common').暂无数据}}</view>
					</view> -->
				</view>

				<!-- 贡献记录 -->
				<view class="gx-list" v-if="tabId==3">
					<view v-if="conpurre.length>0">
						<view class="gx-item" v-for="(m,n) in conpurre" :key="n">
							<view class="align-center justify-between gx-head">
								<view class="gx-time gray3">
									<!-- total_amt_consumed -->
									<text>{{$t('fandetail').本单金额}}:{{m.country==1?'':"$"}}<text
											v-if="m.awardorder">{{parseFloat(m.awardorder.total_price)}}</text><text
											v-else>0</text></text>
									<text
										style="margin-left: 24rpx;color: #F44A42;">{{$t('fandetail').赚}}:{{curreny=='CNY'?'':"$"}}{{m.zs_amt_award|changeCurrency}}</text>
								</view>
								<view class="gx-type gray9">
									<text v-if="m.awardorder.order_status==1"
										style="color: #F44A42;">{{$t('common').待发货}}</text>
									<text v-if="m.awardorder.order_status==2"
										style="color: #F44A42;">{{$t('common').待收货}}</text>
									<text v-if="m.awardorder.order_status==3">{{$t('common').已完成}}</text>
									<text v-if="m.awardorder.order_status==4">{{$t('common').已关闭}}</text>
									<text v-if="m.awardorder.order_status==-1" class="gray9">{{$t('common').已取消}}</text>
									<!-- <text class="gray9">超时未支付</text> -->
								</view>
							</view>

							<view class="gx-bot">
								<view class="gx-list align-center">
									<view class="gx-text gx-left gray9">{{$t('fandetail').订单号}}：</view>
									<view class="gx-text gray9">{{m.order_sn}}</view>
								</view>
								<view class="gx-list align-center">
									<view class="gx-text gx-left gray9">{{$t('fandetail').下单时间}}：</view>
									<view class="gx-text gray9">{{m.t_created}}</view>
								</view>
								<view class="gx-list align-center">
									<view class="gx-text gx-left gray9">{{$t('fandetail').下单人}}：</view>
									<view class="align-center">
										<image class="gr-tx" :src="m.user.avatar" mode="aspectFill"></image>
										<view class="gray6" style="font-size: 24rpx;">{{m.user.nickname}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 					<view class=" tc" v-else style="margin: 20rpx 0  40rpx; ">
						<image src="../../static/images/empty/none.png" mode="" style="width: 520upx;height: 380upx;">
						</image>
						<view class="ft15">{{$t('common').暂无数据}}</view>
					</view> -->
				</view>
			</view>
		</mescroll-body>

		<!-- 备注 -->
		<u-popup :show="bzpop" mode="center" round="10" :safeAreaInsetBottom="false">
			<view class="bz-box">
				<view class="bz-head gray3">{{$t('fandetail').添加备注}}</view>
				<input class="bz-inp gray3" maxlength="20" type="text" :placeholder="$t('fandetail').最多输入20个字"
					v-model="bzVal">
				<view class="align-center">
					<view class="bz-btn gray9" style="border-right: 2rpx solid #EEEEEE;" @click="bzHide(0)">
						{{$t('common').取消}}
					</view>
					<view class="bz-btn" style="color: #F44A42;" @click="bzHide(1)">{{$t('common').保存}}</view>
				</view>
			</view>
		</u-popup>
		<!-- 拨打电话 -->
		<u-popup :show="bdpop" mode="center" round="10" :safeAreaInsetBottom="false">
			<view class="qx-box">
				<view v-if="fuserInfo.area_code=='+86'" class="qx-text">{{$t('fandetail').确定拨打电话}}：{{fuserInfo.phone}}？
				</view>
				<view v-if="fuserInfo.area_code!='+86'" class="qx-text">
					{{$t('fandetail').确定拨打国际电话}}：{{fuserInfo.area_code}}
					{{fuserInfo.phone}}{{$t('fandetail').吗受运营商限制请确认您已开通国际长途业务如未开通将拨打失败}}
				</view>

				<view class="qx-bot align-center">
					<view class="qx-btn" style="border-right: 1rpx solid #EEEEEE;" @click="bdclose()">
						{{$t('common').取消}}
					</view>
					<view class="qx-btn" @click="bdconfirm()">{{$t('common').确认}}</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {
					auto: false
				},
				upOption: {
					auto: false,
					page: {
						num: 0,
						size: 20,
					},
					textNoMore: this.$t('common').已经到底了,
					empty: {
						tip: this.$t('common').暂无数据 // 空提示
					}
				},
				bzpop: false,
				bdpop: false,
				bzVal: "",

				// 数据
				timeArr: [],

				// tab
				tabArr: [{
						id: 1,
						text: "粉丝数据"
					},
					// {
					// 	id: 2,
					// 	text: "个人购物记录"
					// },
					{
						id: 3,
						text: "贡献记录"
					}
				],
				tabId: 1,
				perstatus: [{
						title: '全部',
						id: '0'
					}, {
						title: '待发货',
						id: '1'
					}, {
						title: '待收货',
						id: '2'
					}, {
						title: '已完成',
						id: '3'
					}, {
						title: '已取消',
						id: '-1'
					}, {
						title: '已关闭',
						id: '4'
					},
					// {
					// 	title: '已收货',
					// 	id: '4'
					// },
				], //个人购买
				pershowStatus: false, //订单的打开与关闭
				perstatusActive: 0, //个人
				//贡献记录
				constatus: [{
						title: '全部',
						id: '0'
					}, {
						title: '待发货',
						id: '1'
					}, {
						title: '待收货',
						id: '2'
					}, {
						title: '已完成',
						id: '3'
					}, {
						title: '已取消',
						id: '-1'
					},
					{
						title: '已关闭',
						id: '4'
					},
				],
				conshowStatus: false, //订单的打开与关闭
				constatusActive: 0, //贡献
				uid: '', //粉丝id,
				fuserInfo: {}, // 粉丝详情
				perpurre: [], //个人购买记录
				conpurre: [], //贡献购买记录
				lang: '',
				curreny: "",
				// 粉丝数据
				tcpop: false, //弹窗是否打开
				tcType: 1, //1整体发展力

				// 销售额---
				xseTab: [{
						id: 1,
						text: '本月'
					},
					{
						id: 2,
						text: '上月'
					},
					{
						id: 3,
						text: '累计'
					}
				],
				xseId: 0,
				// 数据
				xsetjChart: {},
				// 样式配置  销售额
				xsetjOpts: {
					color: ["#F89D0E", "#4DCBB3", "#775AED"],
					tooltip: {
						trigger: 'item',
						backgroundColor: "rgba(102, 102, 102, 0.8)",
						borderColor: 'none',
						textStyle: {
							color: "#ffffff"
						},
						formatter: function(param) {
							return param.marker + param.name + '\n' + param.value + ' ' + '(' + param.percent + ')%';
						}
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['30%', '40%'],
						center: ['50%', '60%'],
						data: '',
						label: {
							width: 100, //隐藏标示文字
							fontSize: 12,
							formatter: '{a}\n{b}  \n{c} \n{d}%',
						},
						labelLine: {
							length: 25,
						},
					}, ],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				},
				// 销售额---

				// 本月新增---
				// 样式配置
				byxzOpts: {
					color: ["#1890FF"],
					padding: [15, 24, 0, 10],
					// enableScroll: true,
					dataLabel: false,
					fontSize: 10,
					legend: {
						show: false
					},

					xAxis: {
						disableGrid: true,
						scrollShow: true,
						// itemCount: 4,
						rotateLabel: true,
						marginTop: 10,
						rotateAngle: 45,
						fontSize: 10,
						labelCount: 4,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							axisLine: false,
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						tooltip: {
							bgColor: "#333333",
							borderRadius: 4,
							legendShow: false
						}
					}
				},

				// 数据本月新增---
				byxzChart: {},


				// 本月结算---
				// 样式配置
				byjsOpts: {
					color: ["#1890FF"],
					padding: [15, 24, 0, 10],
					// enableScroll: true,
					dataLabel: false,
					fontSize: 10,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						// itemCount: 4,
						rotateLabel: true,
						marginTop: 10,
						rotateAngle: 45,
						labelCount: 4,
						fontSize: 10,
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: [{
							axisLine: false,
						}]
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "hollow"
						},
						tooltip: {
							bgColor: "#333333",
							borderRadius: 4,
							legendShow: false
						}
					}
				},

				// 数据
				byjsChart: {},
				// 本月结算---

				// 按等级---
				djTab: [{
						id: 1,
						text: '今日'
					},
					{
						id: 2,
						text: '本月'
					},
					{
						id: 3,
						text: '全部'
					}
				],
				djId: 0,
				// 按等级---

				// 成交粉丝统计---
				cjtjTab: [{
						id: 1,
						text: '今日'
					},
					{
						id: 2,
						text: '本月'
					},
					{
						id: 3,
						text: '累计'
					}
				],
				cjtjId: 0,
				// 成交粉丝数据
				cjfsChart: {},
				// 样式配置
				cjfsOpts: {
					color: ["#F89D0E", "#FF665F"],
					tooltip: {
						trigger: 'item',
						backgroundColor: "rgba(102, 102, 102, 0.8)",
						borderColor: 'none',
						textStyle: {
							color: "#ffffff",

						},
						formatter: function(param) {
							return param.marker + param.name + '\n' + param.value + ' ' + '(' + param.percent + ')%';
						},
					},
					legend: {
						orient: 'vertical',
						left: 'left',
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['30%', '40%'],
						center: ['50%', '60%'],
						data: '',
						label: {
							width: 100, //隐藏标示文字
							fontSize: 12,
							formatter: '{a}\n{b}  \n{c} \n{d}%'
						},
						labelLine: {
							length: 25,
						},
					}, ],
					emphasis: {
						itemStyle: {
							shadowBlur: 10,
							shadowOffsetX: 0,
							shadowColor: 'rgba(0, 0, 0, 0.5)'
						}
					}
				},
				// 成交粉丝统计---

				// 粉丝商品偏好---
				fsphYtab: [{
						id: 1,
						text: '本月'
					},
					{
						id: 2,
						text: '上月'
					},
				],
				fsphYindex: 0,
				fsphTtab: [{
						id: 2,
						text: 'plus套组'
					},
					{
						id: 3,
						text: '运营商套组'
					},
					{
						id: 1,
						text: '其他商品'
					},
				],
				fsphTindex: 0,
				// 粉丝商品偏好---,
				thisMonth: '', //本月
				lastMonth: '', //上月
				month: '', //选中的月份
				fsphLists: [], //粉丝商品偏好数组
				fsphTotalnum: 0, //粉丝偏好合计
				totalInfo: {}, //整体数据
				salesStatistics: [], //销售额统计
				cjfstjArr: [], //销售额统计
				// 整体数据
				yjsArr: [{
						text: '本月已结算销售额',
						num: 0
					},
					{
						text: '预估截止本月末结算销售额',
						num: 0
					},
					{
						text: '预计未来7天结算销售额',
						num: 0
					},
					{
						text: '上月已结算销售额',
						num: 0
					},
				],
				djArr: [{
						text: '会员',
						num: 0
					},
					{
						text: 'plus会员',
						num: 0
					},
					{
						text: '运营商会员',
						num: 0
					},
					{
						text: '运营商plus会员',
						num: 0
					},
				],
				hydArr: [{
						text: '高活跃粉丝',
						id: 5,
						num: 0
					},
					{
						text: '中活跃粉丝',
						id: 4,
						num: 0
					},
					{
						text: '低活跃粉丝',
						id: 3,
						num: 0
					},
					{
						text: '不活跃粉丝',
						id: 2,
						num: 0
					},
					{
						text: '未购物粉丝',
						id: 1,
						num: 0
					},
				],
				categoriesadd: [], //本月新增
				addseriesData: [], //本月新增
				categoriessettl: [], //已结算销售额
				settlseriesData: [], //已结算销售额
				djtjArr: [{
						title: '会员在今日本月加入成为会员且未升级的粉丝人数'
					},
					{
						title: 'PLUS会员在今日本月从会员升级成为PLUS会员的粉丝人数'
					},
					{
						title: '运营商会员在今日本月升级成为运营商会员的粉丝人数'
					},
					{
						title: '运营商PLUS会员在今日本月升级成为运营商PLUS会员的粉丝人数包含会员升级运营商PLUS会员PLUS会员升级运营商PLUS会员运营商会员升级运营商PLUS会员'
					},
					{
						title: '筛选全部为查看当前团队下各等级粉丝人数'
					}
				], //等级统计
				fshyArr: [{
						title: '高活跃粉丝一个月内有下单'
					},
					{
						title: '中活跃粉丝13个月内有下单'
					},
					{
						title: '低活跃粉丝36个月内有下单'
					},
					{
						title: '不活跃粉丝超过6个月未下单'
					},
					{
						title: '未购物粉丝从未下单'
					}
				], //粉丝活跃
				// 整体消费力
				ztxfl: [{
						title: 'ling',
						cont: '无消费力'
					},
					{
						title: '小于10',
						cont: '低消费力'
					},
					{
						title: '大于等于10小于30',
						cont: '偏低消费力'
					},
					{
						title: '大于等于30小于60',
						cont: '中消费力'
					},
					{
						title: '大于等于60小于80',
						cont: '高消费力'
					},
					{
						title: '大于等于80',
						cont: '超高消费力'
					}
				],
				xstjTab: [{
					id: 1,
					text: '今日'
				}, {
					id: 2,
					text: '本月'
				}, {
					id: 3,
					text: '上月'
				}],
				xstjArr: [{
						text: 'plus套组',
						num: 0
					},
					{
						text: '运营商套组',
						num: 0
					},
				],
				xstjId: 0
			}
		},

		onLoad(options) {
			this.uid = options.uid
			this.getfansdetailAPI()
			uni.setNavigationBarTitle({
				title: this.$t('fandetail').粉丝详情
			})
			this.lang = uni.getStorageSync('lang').lang //语言
			this.curreny = uni.getStorageSync('currency')
			this.getoveralldataAPI()
			this.getServerData();
		},

		methods: {
			// 打开个人订单状态
			openperStatus() {
				this.pershowStatus = !this.pershowStatus
			},
			// 选择个人订单的状态
			selperStatus(index) {
				this.perstatusActive = index
				this.pershowStatus = false
				// this.fensorderlogAPI()
				this.$utils.debounce(() => {
					this.mescroll && this.mescroll.resetUpScroll()
				}, 500)
			},
			// 打开贡献订单状态
			openconStatus() {
				this.conshowStatus = !this.conshowStatus
			},
			// 选择贡献订单的状态
			selconStatus(index) {
				this.constatusActive = index
				this.conshowStatus = false
				// this.fensordercontAPI()
				this.$utils.debounce(() => {
					this.mescroll && this.mescroll.resetUpScroll()
				}, 500)

			},
			// 备注弹窗打开
			bzShow() {
				this.bzpop = true;
			},

			// 备注弹窗关闭
			async bzHide(val) {
				if (val == 1) {
					// 设置备注
					const res = await this.$api.setuserremark({
						remark: this.bzVal,
						uid: this.uid
					})
					if (res && res.code == 1) {
						this.bzpop = false;
						setTimeout(() => {
							this.fuserInfo.remark = this.bzVal
							this.$utils.msg('备注更改成功')
							this.bzVal = ''
						}, 300)
					}
				} else {
					this.bzpop = false;
					this.bzVal = ''
				}
			},

			// tab
			tabBtn(val) {
				this.tabId = val;
				console.log(this.tabId)
				if (this.tabId == 1) {
					// this.fensordercontAPI()
					// this.getServerData();
					this.getoveralldataAPI()
				}
				if (this.tabId == 2) {
					// this.fensorderlogAPI()
					this.mescroll && this.mescroll.resetUpScroll()
				}
				if (this.tabId == 3) {
					// this.fensordercontAPI()
					this.mescroll && this.mescroll.resetUpScroll()
				}

			},

			// 粉丝数据点击筛选
			xseBtn(val) {
				this.xseId = val;
			},
			// 获取粉丝详情
			async getfansdetailAPI() {
				const res = await this.$api.getfansdetail({
					uid: this.uid
				})
				this.fuserInfo = res.data
				let arr = [{
						img: "../../static/images/fans/icon_jiaru@2x.png",
						text: "加入时间",
						time: this.fuserInfo.create_time || '-'
					},
					{
						img: "../../static/images/fans/icon_shengji@2x.png",
						text: "升级时间",
						time: this.fuserInfo.level_time || '-'
					},
					{
						img: "../../static/images/fans/icon_daoqi@2x.png",
						text: "到期时间",
						time: this.fuserInfo.expire_time || '-'
					},
					{
						img: "../../static/images/fans/icon_zuihxiadan@2x.png",
						text: "最后下单时间",
						time: this.fuserInfo.end_oreder_time || '-'
					},
					// {
					// 	img: "../../static/images/fans/icon_zuihfangwen@2x.png",
					// 	text: "最后访问时间",
					// 	time: this.fuserInfo.updated_at || ''
					// }
				]
				this.timeArr = arr
			},
			// 个人购买记录
			// async fensorderlogAPI() {
			// 	const res = await this.$api.fensorderlog({
			// 		uid: this.uid, //327751
			// 		order_status: this.perstatus[this.perstatusActive].id
			// 	})
			// 	this.perpurre = res.data
			// },
			//贡献购买记录
			// async fensordercontAPI() {
			// 	const res = await this.$api.fensordercont({
			// 		uid: this.uid, //327719
			// 		order_status: this.constatus[this.constatusActive].id
			// 	})
			// 	this.conpurre = res.data
			// },
			// 打电话
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.fuserInfo.phone
				});
			},
			bdconfirm() {
				this.bdpop = false
				this.callPhone()
			},
			bdclose() {
				this.bdpop = false
			},
			// 下拉刷新
			upCallback(page) {
				if (page.num == 1) this.tabId == 2 ? this.perpurre = [] : this.conpurre = []; //如果是第一页需手动制空列表
				this.$api[this.tabId == 2 ? 'fensorderlog' : 'fensordercont']({
					uid: this.uid, //327719
					order_status: this.tabId == 2 ? this.perstatus[this.perstatusActive].id : this.constatus[this
						.constatusActive].id,
					page: page.num,
					limit: page.size
				}).then(res => {
					let curPageData = res.data.list; //当前页的数据列表
					console.log(res.data.list)
					let curPageLen = curPageData?.length; //当前页的数据长度
					let totalPage = parseInt(res.data.count / 20) + 1; //总页数
					let hasNext = page.num === totalPage ? false : true //根据页数判断是否有下一页
					this.tabId == 2 ? this.perpurre = this.perpurre.concat(curPageData) : this.conpurre = this
						.conpurre.concat(curPageData); //追加新数据
					this.mescroll.endSuccess(curPageLen, hasNext);
				})
			},
			// 粉丝数据
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					// let xsres = {
					// 	series: [{
					// 		data: this.salesStatistics,
					// 	}]
					// };
					// let cjres = {
					// 	series: [{
					// 		data: this.cjfstjArr,

					// 	}]
					// };
					let byxzres = {
						categories: this.categoriesadd,
						series: [{
							name: this.$t('fan').新增销售额,
							data: this.addseriesData
						}, ],
					};
					let byjsres = {
						categories: this.categoriessettl,
						series: [{
							name: this.$t('index').已结算销售额,
							data: this.settlseriesData
						}, ],
					};
					// this.xsetjChart = JSON.parse(JSON.stringify(xsres));
					// this.cjfsChart = JSON.parse(JSON.stringify(cjres));
					this.byxzChart = JSON.parse(JSON.stringify(byxzres));
					this.byjsChart = JSON.parse(JSON.stringify(byjsres));

				}, 500);
			},
			// 销售额画饼图
			async init(data) {
				// chart 图表实例不能存在data里
				this.xsetjOpts.series[0].data = data
				const chart = await this.$refs.chartRef.init(echarts);
				chart.setOption(this.xsetjOpts)
			},
			//成交粉丝统计
			async initf(data) {
				// chart 图表实例不能存在data里
				this.cjfsOpts.series[0].data = data
				const chart = await this.$refs.chartReff.init(echarts);
				chart.setOption(this.cjfsOpts)
			},
			// 销售额筛序
			xseBtn(val) {
				this.xseId = val;
				if (this.xseId == 0) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.other_f_value || 0,
						}
					]

					this.init(arr);
				}
				if (this.xseId == 1) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.up_plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.up_operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.up_other_f_value || 0,
						}
					]
					// arr[0].value = this.totalInfo.up_plus_beilv
					// arr[1].value = this.totalInfo.up_operate_beilv
					// arr[2].value = this.totalInfo.up_other_beilv
					this.init(arr);
				}
				if (this.xseId == 2) {
					let arr = [{
							"name": this.$t('common').plus套组,
							"value": this.totalInfo.total_plus_f_value || 0,
						},
						{
							"name": this.$t('common').运营商套组,
							"value": this.totalInfo.total_operate_f_value || 0,
						},
						{
							"name": this.$t('common').其他,
							"value": this.totalInfo.total_other_f_value || 0,
						}
					]
					this.init(arr);
				}
			},
			// 等级条件筛选
			djBtn(val) {
				this.djId = val;
				if (this.djId == 0) {
					this.djArr[0].num = this.totalInfo.day_vip
					this.djArr[1].num = this.totalInfo.day_pulsvip
					this.djArr[2].num = this.totalInfo.day_operator_vip
					this.djArr[3].num = this.totalInfo.day_operator_pulsvip
				}
				if (this.djId == 1) {
					this.djArr[0].num = this.totalInfo.moon_vip
					this.djArr[1].num = this.totalInfo.moon_pulsvip
					this.djArr[2].num = this.totalInfo.moon_operator_vip
					this.djArr[3].num = this.totalInfo.moon_operator_pulsvip
				}
				if (this.djId == 2) {
					this.djArr[0].num = this.totalInfo.total_vip
					this.djArr[1].num = this.totalInfo.total_pulsvip
					this.djArr[2].num = this.totalInfo.total_operator_vip
					this.djArr[3].num = this.totalInfo.total_operator_pulsvip
				}

			},
			// 销售统计
			xstjBtn(index) {
				this.xstjId = index
				if (this.xstjId == 0) {
					this.xstjArr[0].num = this.totalInfo.day_plus_num
					this.xstjArr[1].num = this.totalInfo.day_operate_num
				}
				if (this.xstjId == 1) {
					this.xstjArr[0].num = this.totalInfo.plus_num
					this.xstjArr[1].num = this.totalInfo.operate_num
				}
				if (this.xstjId == 2) {
					this.xstjArr[0].num = this.totalInfo.up_operate_num
					this.xstjArr[1].num = this.totalInfo.up_plus_num
				}

			},
			// 成交粉丝统计筛选
			cjtjBtn(val) {
				this.cjtjId = val;
				if (this.cjtjId == 0) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.day_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.day_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
				if (this.cjtjId == 1) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.moon_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.moon_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
				if (this.cjtjId == 2) {
					let arrcj = [{
							"name": this.$t('fan').首购粉丝占,
							"value": this.totalInfo.total_fans_first_num || 0,
						},
						{
							"name": this.$t('fan').复购粉丝占,
							"value": this.totalInfo.total_fans_repeat_num || 0,
						},
					]
					this.initf(arrcj)
				}
			},
			// 余额筛序 -月份
			// fsphYbtn(val) {
			// 	this.fsphYindex = val;
			// 	if (this.fsphYindex == 1) {
			// 		this.month = this.lastMonth
			// 	} else {
			// 		this.month = this.thisMonth
			// 	}
			// 	this.getgoodprefAPI()
			// },
			// 余额筛序 - 套餐
			// fsphTbtn(val) {
			// 	this.fsphTindex = val;
			// 	this.getgoodprefAPI()
			// },
			// 弹窗打开
			tcShow(val) {
				this.tcpop = true;
				this.tcType = val;
			},

			// 弹窗关闭
			tcHide() {
				this.tcpop = false;
			},
			// 粉丝管理-整体数据
			async getoveralldataAPI() {
				const res = await this.$api.getoveralldata({
					uid: this.uid
				})
				this.totalInfo = res.data.data
				this.totalInfo.moon_settl_sell = res.data.data.moon_settl_sell.toLocaleString()
				this.totalInfo.up_moon_settl_sell = res.data.data.up_moon_settl_sell.toLocaleString()
				this.totalInfo.total_sell = res.data.data.total_sell.toLocaleString()
				// 销售额统计
				let arr = [{
						"name": this.$t('common').plus套组,
						"value": this.totalInfo.plus_f_value || 0, //
					},
					{
						"name": this.$t('common').运营商套组,
						"value": this.totalInfo.operate_f_value || 0, //
					},
					{
						"name": this.$t('common').其他,
						"value": this.totalInfo.other_f_value || 0, //
					}
				]
				this.init(arr)

				// 销售统计
				this.xstjArr[0].num = this.totalInfo.day_plus_num
				this.xstjArr[1].num = this.totalInfo.day_operate_num

				this.salesStatistics = arr
				// console.log(this.totalInfo.plus_beilv, this.totalInfo.operate_beilv)
				// console.log(arr)
				// 已结算销售额统计
				this.yjsArr[0].num = this.totalInfo.moon_sell.toLocaleString()
				this.yjsArr[1].num = this.totalInfo.expect_moon_sell.toLocaleString()
				this.yjsArr[2].num = this.totalInfo.expect_seven_sell.toLocaleString()
				this.yjsArr[3].num = this.totalInfo.up_moon_sell.toLocaleString()
				// 等级
				this.djArr[0].num = this.totalInfo.day_vip
				this.djArr[1].num = this.totalInfo.day_pulsvip
				this.djArr[2].num = this.totalInfo.day_operator_vip
				this.djArr[3].num = this.totalInfo.day_operator_pulsvip
				// 活跃度
				this.hydArr[0].num = this.totalInfo.active_5
				this.hydArr[1].num = this.totalInfo.active_4
				this.hydArr[2].num = this.totalInfo.active_3
				this.hydArr[3].num = this.totalInfo.active_2
				this.hydArr[4].num = this.totalInfo.active_1
				// 成交粉丝数
				let arrcj = [{
						"name": this.$t('fan').首购粉丝占,
						"value": this.totalInfo.day_fans_first_num || 0,
					},
					{
						"name": this.$t('fan').复购粉丝占,
						"value": this.totalInfo.day_fans_repeat_num || 0,
					},
				]

				// this.cjfstjArr = arrcj
				this.initf(arrcj)
				// 本月新增
				res.data.add_list.forEach((item, index) => {
					this.categoriesadd.push(item.date)
					this.addseriesData.push(item.total_amt_award)
				})
				// 已结算销售额 
				res.data.settl_list.forEach((item, index) => {
					this.categoriessettl.push(item.date)
					this.settlseriesData.push(item.total_amt_award)
				})
				// this.getServerData();
				setTimeout(() => {
					this.mescroll.endSuccess(res.data, false);
				}, 500)
			},
		}
	}
</script>

<style lang="scss">
	.sticky-tabs {
		z-index: 990;
		position: sticky;
		top: var(--window-top);
	}

	page {
		background: #F5F5F5;
	}

	// 头部
	.head-box {
		background: #F44A42;
		width: 100%;
		padding: 50rpx 30rpx 26rpx;
		display: flex;
		position: relative;

		.head-img {
			width: 100rpx;
			height: 100rpx;
			border-radius: 100rpx;
			border: 2rpx solid #fff;
			margin-right: 30rpx;
		}

		.head-news {
			padding-top: 8rpx;

			.head-name {
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: bold;
			}

			.head-xj {
				width: 115rpx;
				margin-left: 20rpx;
			}

			.head-bz {
				color: #FFFFFF;
				font-size: 24rpx;
				margin-right: 16rpx;
			}

			.head-bj {
				width: 24rpx;
				height: 24rpx;
			}

			.lable-box {
				margin-top: 24rpx;

				.lable-list {
					padding: 6rpx 16rpx;
					border-radius: 100rpx;
					font-size: 24rpx;
					margin: 0 16rpx 0 0;
				}

				.lable-one {
					background: #FFE5E4;
					border: 2rpx solid #F44A42;
					color: #F44A42;
				}

				.lable-two {
					background: #FFF0CC;
					border: 2rpx solid #FD9E37;
					color: #FD9E37;
				}

				.lable-three {
					background: #F0F7E5;
					border: 2rpx solid #70B603;
					color: #70B603;
				}

				.lable-four {
					background: rgba(195, 195, 195, 0.1);
					border: 2rpx solid #B9B9B9;
					color: #B9B9B9;
				}
			}
		}

		.head-phone {
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			right: 30rpx;
			top: 75rpx;
		}
	}

	// 数据
	.head-bot {
		padding: 24rpx;

		.bot-con {
			background: #FFFFFF;
			border-radius: 16rpx;
			padding: 30rpx 32rpx 30rpx;

			.bot-c-top {
				height: 160rpx;

				.bot-ct-list {
					width: 50%;
					text-align: center;

					.bot-ct-num {
						font-size: 40rpx;
						font-weight: bold;
					}

					.bot-ct-text {
						font-size: 24rpx;
						margin-top: 16rpx;
					}
				}
			}

			.bot-c-bot {
				// padding: 24rpx 0;
				padding-bottom: 24rpx;

				// border-bottom: 2rpx solid #EEEEEE;
				.bot-cb-list {
					margin-top: 16rpx;

					.bot-cb-icon {
						width: 24rpx;
						height: 24rpx;
						margin-right: 24rpx;
					}

					.bot-cb-text {
						width: 180rpx;
						font-size: 24rpx;
					}

					.bot-cb-time {
						font-size: 24rpx;
					}
				}
			}
		}
	}

	// tab
	.tab-box {
		background: #fff;

		.tab-list {
			width: 33.3%;
			text-align: center;
			position: relative;

			.tab-text {
				height: 88rpx;
				line-height: 88rpx;
				font-size: 32rpx;
			}

			.tab-bor {
				width: 60rpx;
				height: 4rpx;
				background: #F44A42;
				border-radius: 100rpx;
				position: absolute;
				left: 50%;
				bottom: 8rpx;
				transform: translate(-50%, 0);
			}

			.tab-ac {
				color: #F44A42;
			}
		}
	}

	// 订单状态
	.ddzt-box {
		justify-content: flex-end;
		height: 84rpx;
		padding: 0 24rpx;

		.ddzt-text {
			font-size: 28rpx;
			margin-right: 16rpx;
		}

		.ddzt-img {
			width: 20rpx;
			height: 10rpx;
		}
	}

	// 列表
	.list-box {
		padding: 0 24rpx;

		// 个人购物记录
		.gr-list {
			.gr-item {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 32rpx;
				margin-bottom: 24rpx;

				.gr-head {
					height: 72rpx;
					border-bottom: 2rpx solid #EEEEEE;

					.gr-time {
						font-size: 24rpx;
					}
				}

				.gr-bot {
					padding: 24rpx 0 12rpx;
					display: flex;

					.gr-img {
						width: 120rpx;
						height: 120rpx;
					}

					.gr-con {
						width: 518rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding-left: 24rpx;

						.gr-name {
							width: 360rpx;
							height: 66rpx;
							font-size: 24rpx;
						}

						.gr-num {
							font-size: 24rpx;
						}

						.gr-price {
							font-size: 28rpx;
							font-weight: bold;
						}
					}
				}
			}
		}

		// 贡献记录
		.gx-list {
			.gx-item {
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 32rpx;
				margin-bottom: 24rpx;

				.gx-head {
					height: 72rpx;
					border-bottom: 2rpx solid #EEEEEE;

					.gx-time {
						font-size: 28rpx;
					}

					.gx-type {
						font-size: 24rpx;
					}
				}
			}

			.gx-bot {
				padding: 0 0 24rpx;

				.gx-list {
					margin-top: 24rpx;

					.gx-text {
						font-size: 24rpx;
					}

					.gx-left {
						width: 120rpx;
						margin-right: 28rpx;
					}

					.gr-tx {
						width: 32rpx;
						height: 32rpx;
						border-radius: 100rpx;
						margin-right: 12rpx;
					}
				}
			}
		}
	}

	.charts-box {
		width: 260rpx;
		height: 260rpx;
		overflow: hidden;
	}

	// 备注弹窗
	.bz-box {
		width: 600rpx;
		height: 283rpx;
		background: #FFFFFF;
		border-radius: 10rpx;

		.bz-head {
			font-size: 32rpx;
			font-weight: bold;
			height: 112rpx;
			text-align: center;
			line-height: 112rpx;
		}

		.bz-inp {
			width: 552rpx;
			height: 62rpx;
			font-size: 28rpx;
			background: #F5F5F5;
			margin: 0 auto 28rpx;
			padding: 0 23rpx;
			box-sizing: border-box;
		}

		.bz-btn {
			width: 50%;
			height: 80rpx;
			font-size: 30rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}

	.fstj-h-t-ac {
		background: #FFD9D7;
		border: 2rpx solid #EE6753;
		color: #EE6753;
	}

	.fstj-h-t-noac {
		background: rgba(127, 127, 127, 0.07);
		border: 2rpx solid rgba(127, 127, 127, 0.07);
		color: #999999;
	}

	.qx-box {
		width: 600rpx;
		// height: 246rpx;
		background: #ffffff;
		border-radius: 10rpx;

		.qx-text {
			color: #2A2A2A;
			font-size: 30rpx;
			padding: 56rpx 40rpx;
			text-align: center;
		}

		.qx-bot {
			border-top: 2rpx solid #EEEEEE;

			.qx-btn {
				width: 50%;
				height: 92rpx;
				text-align: center;
				line-height: 80rpx;
				color: #2A2A2A;
				font-size: 30rpx;
			}
		}
	}

	.tc-box {
		width: 650rpx;
		border-radius: 10rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 30rpx 20rpx 0;
		position: relative;

		.tc-head {
			.tc-h-icon {
				width: 7rpx;
				margin-right: 16rpx;
			}

			.tc-h-tit {
				font-size: 32rpx;
				font-weight: bold;
				margin-right: 12rpx;
			}

			.tc-h-text {
				font-size: 24rpx;
			}
		}

		.tc-con {
			padding: 10rpx 0 0 0;

			.tc-c-head {
				font-weight: bold;
				background: #F8F8F8;
				border-bottom: 2rpx solid #EEEEEE;
			}

			.tc-c-list {
				max-height: 530rpx;
				overflow-y: scroll;
			}

			.tc-c-item {
				border-bottom: 2rpx solid #EEEEEE;
			}

			.tc-c-text {
				font-size: 24rpx;
				padding: 20rpx 16rpx;
			}

			.tc-c-a {
				width: 160rpx;
			}

			.tc-c-b {
				width: 300rpx;
				border-left: 2rpx solid #EEEEEE;
				border-right: 2rpx solid #EEEEEE;
			}

			.tc-c-c {
				width: 160rpx;
			}
		}

		.tc-bot {
			height: 97rpx;
			text-align: center;
			line-height: 97rpx;
			font-size: 30rpx;
			color: #F44A42;
			border-top: 2rpx solid #EEEEEE;
		}


		.tc-h-gb {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: 24rpx;
			top: 34rpx;
		}
	}

	.tc-c-item:nth-child(2n) {
		background: #F8F8F8 !important;
	}

	.tc-c-item:last-child {
		border-bottom: none !important;
	}

	// 整体数据
	.ztsj-box {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 0 32rpx;
		margin-bottom: 24rpx;

		.ztsj-head {
			padding: 32rpx 0;
			font-size: 30rpx;
			font-weight: bold;
		}

		// 整体状态
		.ztzt-box {
			.ztzt-list {
				width: 50%;
				text-align: center;

				.ztzt-text {
					font-size: 28rpx;
					margin-right: 12rpx;
				}

				.ztzt-icon {
					width: 28rpx;
					height: 28rpx;
				}

				.ztzt-img {
					width: 170rpx;
					height: 170rpx;
					margin-top: 30rpx;
				}
			}
		}

		// 已结算销售额统计
		.yjs-box {
			.yjs-list {
				width: 50%;
				margin-bottom: 40rpx;

				.yjs-text {
					font-size: 24rpx;
					margin-bottom: 16rpx;
				}

				.yjs-num {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		// 粉丝统计
		.fstj-list {
			padding: 40rpx 0;

			.fsth-head {
				.fstj-h-bor {
					width: 6rpx;
					height: 28rpx;
					margin-right: 12rpx;
				}

				.fstj-h-text {
					font-size: 28rpx;
				}
			}

			.fstj-l-item {
				width: 33%;
				text-align: center;
				margin-top: 40rpx;

				.fstj-l-text {
					font-size: 24rpx;
					margin-bottom: 16rpx;
					font-weight: bold;
				}

				.fstj-l-num {
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}

		// 成交粉丝统计
		.cjtj-box {
			padding: 52rpx 0 40rpx;

			.cjtj-rs {
				font-size: 30rpx;
				font-weight: bold;
			}

			.cjtj-left {

				.cjtj-l-bor {
					width: 16rpx;
					height: 16rpx;
					border-radius: 4rpx;
					margin: 8rpx 12rpx 0 0;
				}

				.cjtj-l-text {
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}
			}
		}

		// 粉丝商品偏好
		.fsph-box {
			padding: 30rpx 0;

			.fsph-con {
				padding-top: 32rpx;

				.fsph-c-head {
					background: #FEF3E2;
					border-radius: 10rpx 10rpx 0 0;

					.fsph-h-pub {
						// height: 80rpx;
						text-align: center;
						// line-height: 80rpx;
					}
				}

				.fsph-c-bot {
					height: 80rpx;
					padding: 0 30rpx;
					box-sizing: border-box;
					background: #FFFFFF;
					border-radius: 10rpx 10rpx 0 0;
					border-bottom: 2rpx solid #EEEEEE;
				}

				.fsph-list {
					width: 100%;
					height: 400rpx;
					overflow-y: scroll;
					background: rgba(127, 127, 127, 0.06);

					.fsph-item {
						text-align: center;
						border-bottom: 2rpx solid #EEEEEE;
					}
				}

				.fsph-l-a {
					width: 96rpx;
					font-size: 24rpx;
				}

				.fsph-l-b {
					width: 410rpx;
					font-size: 24rpx;
					padding: 24rpx 20rpx;
					box-sizing: border-box;
					border-left: 2rpx solid #EEEEEE;
					border-right: 2rpx solid #EEEEEE;
				}

				.fsph-l-c {
					width: 133rpx;
					font-size: 24rpx;
				}


				.fsph-c-list {
					font-size: 24rpx;
				}
			}
		}

		// 按等级、粉丝统计、销售额统计、粉丝商品偏好--tab
		.fstj-h-tab {
			width: 140rpx;
			height: 50rpx;
			color: #999999;
			font-size: 24rpx;
			border-radius: 8rpx;
			text-align: center;
			line-height: 50rpx;
			background: rgba(127, 127, 127, 0.07);
			border: 2rpx solid rgba(127, 127, 127, 0.07);
			margin-left: 12rpx;
		}

		.fstj-h-t-ac {
			background: #FFD9D7;
			border: 2rpx solid #EE6753;
			color: #EE6753;
		}
	}


	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>